<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>T5 虚拟机 - 三体自动化技术协会</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <div class="header">
            <h1>三体自动化技术协会</h1>
            <p>T5 虚拟机控制面板</p>
        </div>

        <div class="main-content">
            <div class="frame-buffer-container">
                <h2>帧缓冲区显示</h2>
                <div class="frame-buffer" id="frameBuffer">
                    <div class="loading">
                        <p>正在加载帧缓冲区内容...</p>
                    </div>
                    <div class="selection-box" id="selectionBox"></div>
                </div>
            </div>

            <div class="controls">
                <h2>虚拟机控制</h2>
                
                <div class="button-group">
                    <button class="btn btn-primary" id="runBtn">运行虚拟机</button>
                    <button class="btn btn-secondary" id="stepBtn">单步执行</button>
                    <button class="btn btn-secondary" id="resetBtn">重置虚拟机</button>
                    <button class="btn btn-secondary" id="stopBtn" disabled>停止</button>
                </div>

                <!-- 汇编代码输入框 -->
                <div style="margin: 15px 0;">
                    <h3>汇编代码输入</h3>
                    <textarea id="asmCode" placeholder="输入汇编代码，例如：PUSH 10 PUSH 5 PUSH #x2A SETU HLT" 
                              style="width: 100%; height: 80px; padding: 8px; border: 1px solid #ccc; border-radius: 4px; font-family: monospace;"></textarea>
                    <button class="btn btn-primary" id="loadAsmBtn" style="margin-top: 8px; width: 100%;">加载汇编代码</button>
                    <div id="asmStatus" style="margin-top: 8px; font-size: 12px; text-align: center;"></div>
                </div>

                <div class="status-panel">
                    <h3><a href="/api/state" target="_blank" class="status-link">虚拟机状态</a></h3>
                    <div class="status-item">
                        <span class="status-label">程序计数器 (PC):</span>
                        <span class="status-value" id="pcValue">0</span>
                    </div>
                    <div class="status-item">
                        <span class="status-label">堆栈指针 (SP):</span>
                        <span class="status-value" id="spValue">-1</span>
                    </div>
                    <div class="status-item">
                        <span class="status-label">执行周期:</span>
                        <span class="status-value" id="cyclesValue">0</span>
                    </div>
                    <div class="status-item">
                        <span class="status-label">剩余硬币:</span>
                        <button class="btn btn-coin" id="insertCoinBtn" title="点击投币100个">
                            <span class="coin-icon">🪙</span>
                            <span class="coins-value" id="coinsValue">4096</span>
                        </button>
                    </div>
                </div>
            </div>
        </div>

        <div class="footer">
            <p>© 2024 <a href="https://gitee.com/wu-org" target="_blank">三体自动化技术协会</a>
                 - 基于 Racket 的 <a href="https://gitee.com/wu-org/isa/blob/master/Tao5.rkt" target="_blank">T5 虚拟机</a> 实现</p>
        </div>
    </div>

    <script src="script.js"></script>
</body>
</html>